<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2022/4/22
  Time: 10:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Hello World</title>
    <script>
        function f1(){
            let xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function(){
                // console.log(xhr.readyState);
                // console.log("执行回调函数");
                // 只有当服务器响应回来之后,才需要基于响应做额外的处理
                // 且只有响应状态码表示成功时,才需要处理
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log("执行回调函数");
                    let result = xhr.responseText;
                    console.log("result:"+result);
                    document.getElementById("d1").innerHTML = result;
                }
            };

            // 建立与服务器的连接
            xhr.open("get","${pageContext.request.contextPath}/sayHello",true);

            // 发送请求,如果请求没有参数,则方法的参数为null
            // 如果请求有参数,则方法的参数即为请求的参数
            // 一般情况下,get请求的参数会在url中体现
            // 因此,发送时只有post请求才会在此处传递参数
            xhr.send(null);
        }
    </script>
</head>
<body>
<button onclick="f1()">sayHello</button>
<div id="d1"></div>
</body>
</html>
